import FilterCard from '@/pages/components/FilterCard/index';
import DataCard from './components/DataCard';
import TableCard from './components/TableCard';

import { VipTypeEnum, vipLabelMap } from '@/enums/vip.enum';

import type { FilterFormItemType, ValueType } from '@/pages/components/FilterCard/types/index.type';
import type { VipValueType } from '@/types/vip.type';

const VipFile = () => {
  // 会员类型
  const vipTypeOptions = Object.keys(VipTypeEnum)
    .filter(key => /^\d+$/.test(key)) // 过滤掉非数字类型的 key
    .map(key => ({ value: +key, label: vipLabelMap[+key as VipValueType] }));

  const filterFormList: FilterFormItemType[] = [
    { label: '姓名', name: 'username', type: 'input' },
    { label: '联系电话', name: 'phoneNumber', type: 'input' },
    { label: '会员类型', name: 'vipType', type: 'select', options: vipTypeOptions },
    { label: '开卡店铺', name: 'cardStore', type: 'input' },
    { label: '开卡时间', name: 'openingTime', type: 'rangePicker' },
    { label: '生日月份', name: 'birthdayMonth', type: 'datePicker', format: 'M月', picker: 'month', placeholder: '' },
    { label: '会员等级', name: 'membershipLevel', type: 'inputNumber' },
    { label: '价格范围', name: 'priceRange', type: 'rangeInputNumber' },
    {
      label: '公众号关注',
      name: 'isFollow',
      type: 'radio',
      options: [
        { label: '已关注', value: true },
        { label: '未关注', value: false },
      ],
    },
  ];
  const onFilterCardFinish = (value: ValueType) => {
    console.log('🚀 ~ onFinish ~ value:', value);
  };
  const onFilterCardReset = () => {
    console.log('🚀 ~ onReset');
  };
  
  return (
    <div>
      <DataCard />
      <FilterCard filterFormList={filterFormList} onFinish={onFilterCardFinish} onReset={onFilterCardReset} />
      <TableCard />
    </div>
  );
};
export default VipFile;
